<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩效果</title>
<link rel="stylesheet" href="../css/index.css" />
<!--只是用六的css效果-->
<script type="text/javascript" src="../js/jquery-2.1.3.min.js" ></script>
</head>

<body>
	
	<!--图片放大效果  结束-->
	<!--图片放大效果伴随蒙版文字出现  开始-->
	<h2 class="content-title">六、图片放大效果伴随蒙版文字出现效果</h2>
	<div class="content-six">
		<ul class="contentbox-six">
			<li class="con-six">
				<img class="conimg-two" src="images/class1.jpg"/>
				<div class="txt-six">
					<h3>图片一</h3>
					<p>为您铺就成为IT大神的在线学习之路</p>
				</div>
			</li>
			<li class="con-six">
				<img class="conimg-two" src="images/class2.jpg"/>
				<div class="txt-six">
					<h3>图片二</h3>
					<!--<p>英语、韩语、日语各类语言课程一网打尽</p>-->
				</div>
			</li>
			<li class="con-six">
				<img class="conimg-two" src="images/class3.jpg"/>
				<div class="txt-six">
					<h3>图片三</h3>
					<!--<p>传授会计师、建筑师等各类考证学习宝典</p>-->
				</div>
			</li>
			<li class="con-six">
				<img class="conimg-two" src="images/class4.jpg"/>
				<div class="txt-six">
					<h3>图片四</h3>
					<!--<p>小学、初中、高中各科课程在线辅导</p>-->
				</div>
			</li>
			<li class="con-six">
				<img class="conimg-two" src="images/class5.jpg"/>
				<div class="txt-six">
					<h3>图片五</h3>
					<!--<p>吉他、摄影等各类型区教程让你成为生活达人</p>-->
				</div>
			</li>
			<li class="con-six">
				<img class="conimg-two" src="images/class6.jpg"/>
				<div class="txt-six">
					<h3>图片六</h3>
					<!--<p>教你如何和宝宝一起成长</p>-->
				</div>
			</li>
			
			<li class="con-six">
				<img class="conimg-two" src="images/class6.jpg"/>
				<div class="txt-six">
					<h3>图片7</h3>
					<!--<p>教你如何和宝宝一起成长</p>-->
				</div>
			</li>
			
			<li class="con-six">
				<img class="conimg-two" src="images/class6.jpg"/>
				<div class="txt-six">
					<h3>图片8</h3>
					<!--<p>教你如何和宝宝一起成长</p>-->
				</div>
			</li>
			
		</ul>
	</div>
	<!--图片放大效果伴随蒙版文字出现  结束-->
<script type="text/javascript"  >
$(function(){
		   	
	
		//图片放大效果伴随蒙版文字出现 开始
	$(".con-six").hover(function() {
		$(this).find(".conimg-two").stop().animate({"width":310,"height":210});
		$(this).find(".txt-six").css("display","block");
	}, function() {
		$(this).find(".conimg-two").stop().animate({"width":297,"height":198});
		$(this).find(".txt-six").css("display","none");
	})
	//图片放大效果伴随蒙版文字出现 结束
	
});	
</script>
</body>
</html>
